<template>
  <el-container class="h-100 p-0">
    <el-main
      class="p-0"
      v-loading="loading"
      element-loading-text="地图加载中"
      element-loading-background="rgba(0, 0, 0, 0.1)"
      element-loading-spinner="el-icon-map-location"
    >
      <InitMap ref="map" height="100%" backgroundColor="white" @getChoiceGraphics="gMouseMover"/>
      <div :style="divclass">{{cityName}}</div>
    </el-main>
  </el-container>
</template>
<script>
import InitMap from "../map/InitMap";
import axios from "axios";

const preCode = "61";
const colors = [[31, 156, 255, 0.7], [86, 205, 115, 0.7]];
export default {
  name: "conutrycommonmap",
  title: "地图显示",
  components: { InitMap },
  data() {
    return {
      divclass: {
        display: "none"
      },
      cityName: "",
      loading: true
    };
  },
  methods: {
    renderingMap(listData) {
      if (this.$store.getters.userType == 3) {
        this.createCityPolygon(listData, this.$store.state.user.user.cityId);
      } else {
        if (sessionStorage.getItem("areaBorder")) {
          console.time("global");
          let polygonData = JSON.parse(sessionStorage.getItem("areaBorder"));
          this.creatPolygon(listData, polygonData);
          console.timeEnd("global");
        } else {
          console.time("globalajax");
          let url = this.$api.getRegion + "?name=陕西省县界";
          let lables = [];
          axios.get(url).then(res => {
            if (res.data.code === "200") {
              this.creatPolygon(listData, res.data.data);
              sessionStorage.setItem(
                "areaBorder",
                JSON.stringify(res.data.data)
              );
              console.timeEnd("globalajax");
            } else {
              console.log(res);
            }
          });
        }
      }
    },
    creatPolygon(listData, areaData) {
      this.$refs.map.removeGraphics();
      let centerPoinit = this.$commonUtils.provinceCenter;
      let drawComplate = 0;
      areaData.forEach(item => {
        let cp = [item.properties.XZB, item.properties.YZB];
        let name = item.properties.NAME;
        let code = item.properties.KIND;
        let paths = [];
        item.geometry.coordinates.forEach(el => {
          paths.push(el);
        });
        let cor = colors[0];
        listData.forEach(ll => {
          if (ll.area_name == name && ll.status == 1) {
            cor = colors[1];
          }
        });
        let eAtt = {
          cityId: code,
          cityName: name
        };
        this.$refs.map
          .addMultiplePolygon(paths, cor, "white", eAtt)
          .then(status2 => {
            if (status2) {
              drawComplate++;
              if (drawComplate == this.$commonUtils.getTotalArea()) {
                this.$refs.map.mapCenterAt(centerPoinit, 8, 5000000);
              }
            }
          });
      });
      this.loading = false;
    },
    createCityPolygon(listData, code) {
      let _this = this;
      let url = this.$api.getRegionByCode + "?code=" + code;
      let scal = 2000000;
      let lables = [];
      this.loading = true;
      axios.get(url).then(res => {
        if (res.data.code === "200") {
          // 一下加0.4，2.2为手动试验出来的，不准确可以自己调
          this.$refs.map.removeGraphics();
          let centerPoinit = [res.data.data[0].lnt, res.data.data[0].lat];
          let drawComplate = 0;
          res.data.data[0].child.forEach((element, i) => {
            let paths = [];
            lables.push({
              point: [element.lnt, element.lat],
              name: element.name
            });
            let name = element.name;
            element.points.forEach(el => {
              let lngLats = el.region.split(",");
              let crings = [];
              lngLats.forEach(ll => {
                let lngLat = ll.split(" ");
                crings.push([lngLat[0], lngLat[1]]);
              });
              paths.push(crings);
            });
            let cor = colors[0];
            listData.forEach(ll => {
              if (ll.area_name == name && ll.status == 1) {
                cor = colors[1];
              }
            });
            let eAtt = {
              cityId: code,
              cityName: element.name
            };
            this.$refs.map
              .addMultiplePolygon(paths, cor, "white", eAtt)
              .then(status2 => {
                if (status2) {
                  drawComplate++;
                  if (drawComplate == lables.length) {
                    this.$refs.map.mapCenterAt(centerPoinit, 8, scal);
                    this.loading = false;
                  }
                }
              });
          });
        }
      });
    },
    async loadMap() {
      return new Promise((resolve, reject) => {
        this.$refs.map.loadWebTileMap().then(status => {
          if (status) {
            this.$refs.map.creatGraphicsLayer().then(res => {
              if (res) {
                return resolve(true);
              }
            });
            this.$refs.map.hitTestGraphic("pointer-move");
          }
        });
      });
    },
    gMouseMover(gc) {
      if (gc && gc.selectGraphics != null) {
        let _this = this;
        gc.selectGraphics.forEach(item => {
          if (item.graphic.attributes) {
            if (item.graphic.attributes.cityName) {
              _this.divclass = {
                display: "inline",
                left: gc.x + 200 + "px",
                top: gc.y + 50 + "px",
                position: "absolute",
                "z-index": 100,
                color: "white",
                Opacity: 0.8,
                "background-color": "black",
                width: "100px",
                "text-align": "center",
                "border-radius": "10px"
              };
              this.cityName = item.graphic.attributes.cityName;
            }
          }
        });
      } else {
        this.divclass = {
          display: "none"
        };
      }
    }
  },
  mounted() {
    //this.loadMap();
  }
};
</script>
<style lang='scss'>
#user-container {
  > div {
    width: 100%;
  }
}
.el-loading-spinner .el-icon-map-location {
  animation: bird 1.5s linear infinite;
  -webkit-animation: bird 1.5s linear infinite;
  -moz-animation: bird 1.5s linear infinite;
  -o-animation: bird 1.5s linear infinite;
  -ms-animation: bird 1.5s linear infinite;
}
@-webkit-keyframes bird {
  0% {
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  25% {
    -moz-transform: translate(0, -8px);
    -webkit-transform: translate(0, -8px);
    -o-transform: translate(0, -8px);
    -ms-transform: translate(0, -8px);
    transform: translate(0, -8px);
  }
  50% {
    -moz-transform: translate(0, -16px);
    -webkit-transform: translate(0, -16px);
    -o-transform: translate(0, -16px);
    -ms-transform: translate(0, -16px);
    transform: translate(0, -16px);
  }

  75% {
    -moz-transform: translate(0, -8px);
    -webkit-transform: translate(0, -8px);
    -o-transform: translate(0, -8px);
    -ms-transform: translate(0, -8px);
    transform: translate(0, -8px);
  }

  100% {
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
</style>